<template>
  <div class="head">
    <i class="iconfont icon-jiantouarrow487"></i>
    <div class="search">
      <i class="iconfont icon-sousuo"></i>
      <span>输入游玩的景点和城市</span>
    </div>
    <router-link tag="div" to="city" class="city">城市</router-link>  
  </div>
</template>
<script>
export default {
  name: "HomeHead"
};
</script>
<style lang="scss" scoped>
.head {
  height: 130px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  background: rgb(2, 188, 213);
  i {
    font-size: 55px;
    margin-right: 30px;
  }
  .search {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 20px;
    width: 450px;
    height: 100px;
    background: #fff;
    color: #ccc;
    margin-right: 30px;
  }
  .icon-jiantouarrow487 {
    color: #fff;
  }
  .city {
    color: #fff;
    position: relative;
  }
  .city::before {
    content: "";
    position: absolute;
    z-index: 100;
    right: -30px;
    top: 20px;
    display: block;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #fff;
  }
}
</style>
